<script>
export default {
  name: "customDirectives",
  data() {
    return {
      redd: 'red',
      val: '',
      yel: 'yellow'
    }
  },
  methods: {},

  // 私有自定义指令
  directives: {
    // 不再使用驼峰命名法，用-连接
    // 如 ownFs20 写成 own-fs20 带引号，只有一个单词不带引号
    // 第一种写法，相当于bind
    'own-fs20'(el, binding) {
      console.log(el, '私有定义')
      console.log(binding, '私有定义')
      el.focus()
    },
    // 第二种写法
    // 'own-fs40': {
    //   bind(el, binging) {
    //   },
    //   inserted(el) {
    //   },
    //   update(el) {
    //   },
    // }
  }
}
</script>

<template>
  <div>
    自定义指令
    <!--  分全局定义和私有定义
    全局在main.js中-->
    <div v-color="redd">文本内容</div>
    <div v-color="yel">文本内容</div>
    <input type="text" v-model="val" v-color="redd">
    <div v-own-fs20>这是文本</div>
    <input type="text" v-model="val" v-own-fs20>
<!--    <input type="text" v-model="val" v-own-fs40>-->
  </div>
</template>

<style scoped lang="less">

</style>